<template>
  <div>
    <el-row :gutter="6">
      <el-col :span="12">
        <el-card style="height: 580px">
          <div slot="header">
            <span>基本信息</span>
          </div>
          <el-form ref="info" :model="info" label-width="80px">
            <el-form-item label="学号">
              <el-input v-model="info.num" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="info.name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-model="info.gender" label="1" :disabled="true">男</el-radio>
              <el-radio v-model="info.gender" label="0" :disabled="true">女</el-radio>
            </el-form-item>
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:10000/api/thirdparty/oss"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="info.img" :src="info.img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 580px">
          <div slot="header">
            <span>修改</span>
            <el-button @click="isEdit = false" style="float: right; padding: 3px 0" type="text">修改</el-button>
          </div>
          <el-form ref="detail" :model="detail" label-width="100px">
            <el-form-item label="身份证号">
              <el-input v-model="detail.card" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="detail.phone" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="看护人姓名">
              <el-input v-model="detail.ordName" :disabled="isEdit"></el-input>
            </el-form-item>
            <el-form-item label="看护人关系">
              <el-select v-model="detail.ordRelation" :disabled="isEdit" placeholder="请选择">
                <el-option label="父亲" value="0"></el-option>
                <el-option label="母亲" value="1"></el-option>
                <el-option label="爷爷" value="2"></el-option>
                <el-option label="奶奶" value="3"></el-option>
                <el-option label="姐姐" value="4"></el-option>
                <el-option label="哥哥" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="看护人联系">
              <el-input v-model="detail.ordPhone" :disabled="isEdit"></el-input>
            </el-form-item>
            <el-form-item label="籍贯">
              <el-input v-model="detail.place" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="居住地">
              <el-input v-model="detail.address" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
          <el-button @click="submitDetail" type="success" style="width: 100px;margin-left: 45%">提交</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {studentDetailInfoById, studentInfoById, updateImg, updateInfo} from "../api/stu";
  import {mixin} from "../mixins";

  export default {
      name: "STU",
      mixins: [mixin],
      computed: {
        ...mapGetters([
          "userId"
        ])
      },
      data(){
        return{
          isEdit: true,
          info: {
            id: '',
            num: '',
            name: '',
            gender: '0',
            img: ''
          },
          detail: {
            id: '',
            card: '',
            phone: '',
            ordRelation: '',
            ordName: '',
            ordPhone: '',
            place: '',
            address: ''
          }
        }
      },
      created() {
        this.init()
      },
      methods: {
        submitDetail(){
          if(!this.isEdit){
            updateInfo(this.detail).then(({data}) => {
              if(data.code === 0){
                this.notify("修改成功！", "success")
                this.isEdit = true
              }else{
                this.notify("修改失败，请稍后再试", "error")
              }
            }).catch(err => {
              this.notify("修改失败，请稍后再试", "error")
            })
          }else{
            this.notify("请先进行修改操作！", "warning")
          }
        },
        init(){
          studentInfoById(this.userId).then(({data}) => {
            this.info.id = data.student.id
            this.info.num = data.student.num
            this.info.name = data.student.name
            this.info.gender = data.student.gender
            this.info.img = data.student.img
          }).catch(err => {
            console.error(err)
          })

          studentDetailInfoById(this.userId).then(({data}) => {
            this.detail.id = data.detail.id
            this.detail.card = data.detail.card
            this.detail.address = data.detail.address
            this.detail.phone = data.detail.phone
            this.detail.place = data.detail.place
            this.detail.ordName = data.detail.ordName
            this.detail.ordPhone = data.detail.ordPhone
            this.detail.ordRelation = data.detail.ordRelation
          }).catch(err => {
            console.error(err)
          })
        },
        handleAvatarSuccess(res, file) {
          this.info.img = URL.createObjectURL(file.raw);
          updateImg(this.info.id, res.url).then(({data}) => {
            if(data.code === 0){
              this.notify("修改头像成功", "success")
              this.$store.commit("setImg", res.url)
            }else{
              this.notify("修改头像出错", "error")
            }
          }).catch(err => {
            this.notify("修改头像出错", "error")
          })
        }
      }
    }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
